// 导入所有部分
@import 'variables';
@import 'mixins';
@import 'animations';

// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: $font-family;
  background-color: $gray-100;
  color: $gray-900;
  line-height: 1.6;
}

// 聊天容器样式
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  background-color: $white;
  box-shadow: $shadow-lg;
  position: relative;
  overflow: hidden;

  @include mobile {
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
  }
}

// 头部样式
.header {
  padding: $spacing-md $spacing-lg;
  background: linear-gradient(135deg, $primary-color, #0056b3);
  color: $white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: $shadow-sm;
  z-index: 10;

  h2 {
    font-size: $font-size-lg;
    font-weight: 600;
    margin: 0;
  }
}

.connection-status {
  display: flex;
  align-items: center;
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: 20px;
  background-color: rgba($white, 0.2);
  
  &::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: $spacing-xs;
    background-color: currentColor;
  }
  
  &.connected {
    color: $success-color;
  }
  
  &:not(.connected) {
    color: $error-color;
    @include animation-blink;
  }
}

// 消息容器样式
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: $spacing-md;
  background-color: $gray-100;
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  
  // 自定义滚动条
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: $gray-400;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: $gray-500;
  }
}

// 消息样式
.message {
  display: flex;
  max-width: 80%;
  @include animation-fadeIn;
  
  &.user {
    align-self: flex-end;
    
    .content {
      background: linear-gradient(135deg, $user-msg-bg, darken($user-msg-bg, 10%));
      color: $user-msg-text;
      border-bottom-right-radius: $spacing-xs;
    }
  }
  
  &.ai {
    align-self: flex-start;
    
    .content {
      background-color: $ai-msg-bg;
      color: $ai-msg-text;
      border-bottom-left-radius: $spacing-xs;
    }
    
    &.error {
      .content {
        background-color: $error-msg-bg;
        color: $error-msg-text;
      }
    }
  }
}

.avatar {
  margin: 0 $spacing-sm;
  font-size: 24px;
  align-self: flex-end;
}

.content {
  padding: $spacing-md;
  border-radius: $border-radius;
  box-shadow: $shadow-sm;
  word-wrap: break-word;
  line-height: 1.5;
}

.message-text {
  line-height: 1.4;
}

.error-message {
  font-size: $font-size-sm;
  margin-top: $spacing-xs;
  font-style: italic;
}

// 加载状态样式
.loading {
  .content {
    display: flex;
    align-items: center;
  }
}

.typing-indicator {
  display: inline-flex;
  margin-left: $spacing-sm;
  
  span {
    height: 6px;
    width: 6px;
    margin: 0 2px;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    @include animation-typing;
    
    &:nth-child(1) { animation-delay: 0s; }
    &:nth-child(2) { animation-delay: 0.2s; }
    &:nth-child(3) { animation-delay: 0.4s; }
  }
}

// 输入区域样式
.input-area {
  padding: $spacing-md;
  border-top: 1px solid $gray-300;
  background-color: $white;
  display: flex;
  gap: $spacing-md;
  align-items: flex-end;
  
  @include mobile {
    flex-direction: column;
    gap: $spacing-sm;
  }
}

textarea {
  flex: 1;
  padding: $spacing-md;
  border: 1px solid $gray-400;
  border-radius: $border-radius;
  resize: none;
  font-family: inherit;
  font-size: $font-size-md;
  line-height: 1.5;
  min-height: 60px;
  max-height: 120px;
  transition: all 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
  }
  
  &:disabled {
    background-color: $gray-100;
    cursor: not-allowed;
  }
  
  @include mobile {
    width: 100%;
  }
}

.send-button {
  @include button-primary;
  padding: $spacing-md $spacing-lg;
  font-size: $font-size-md;
  white-space: nowrap;
  
  @include mobile {
    width: 100%;
  }
}

// 连接警告样式
.connection-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($black, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: $spacing-md;
}

.warning-content {
  @include card;
  max-width: 400px;
  width: 100%;
  
  h3 {
    color: $error-color;
    margin-bottom: $spacing-md;
  }
  
  p {
    margin-bottom: $spacing-md;
  }
  
  ul {
    margin-left: $spacing-lg;
    margin-bottom: $spacing-lg;
    
    li {
      margin-bottom: $spacing-xs;
    }
  }
  
  button {
    @include button-primary;
    width: 100%;
  }
}

// 响应式设计
@include mobile {
  .header {
    padding: $spacing-sm $spacing-md;
    
    h2 {
      font-size: $font-size-md;
    }
  }
  
  .messages-container {
    padding: $spacing-sm;
  }
  
  .message {
    max-width: 90%;
  }
  
  .avatar {
    font-size: 20px;
  }
  
  .content {
    padding: $spacing-sm;
  }
  
  .input-area {
    padding: $spacing-sm;
  }
}